<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(elementId){
            return document.getElementById(elementId);
        }

        function checkUserName(){
            //向服务器发送ajax的GET请求，第一个参数为应用控制器的访问路径
            //第二个参数为请求服务器的表单数据
            // axios.get("/ajax/checkName",{
            //     params:{
            //         aaa:$("name").value
            //     }
            // }).then(e => {//处理响应信息，
            //     //得到响应信息的消息体
            //     var info = e.data;
            //     if(info == "yes"){
            //         $("nameSpan").innerHTML = "该用户已存在";
            //         $("nameSpan").style.color = "red";
            //     }
            //     else{
            //         $("nameSpan").innerHTML = "可以使用";
            //         $("nameSpan").style.color = "green";
            //     }
            // });

            var param = new URLSearchParams();
            //添加表单数据
            param.append("aaa",$("name").value);

            //向服务器发送ajax的POST请求，第一个参数为请求应用控制器的URL路径
            //第二个参数为表单数据
            axios.post("/ajax/checkName",param).then(e => {
                var info = e.data;
                if(info == "yes"){
                    $("nameSpan").innerHTML = "该用户已存在";
                    $("nameSpan").style.color = "red";
                }
                else{
                    $("nameSpan").innerHTML = "可以使用";
                    $("nameSpan").style.color = "green";
                }
            });
        }

        async function update(){
            var x = 1;
            await axios.get("/ajax/update",null).then(e => {
                x = e.data;
            });
            alert("x="+x);
        }
    </script>
</head>
<body>
    <form action="/ajax/checkName">
    用户名：<input type="text" id="name" onblur="checkUserName()">
        <span id="nameSpan"></span>
    <br>
    电话：<input type="text" id="phone"><br>
    <input type="button" value="添加">
        <input type="submit" value="提交">
    </form>

    <input type="button" value="修改" onclick="update()">
    <div id="contentDiv"></div>
</body>
</html>